<template>
  <div>
    <div class="header">
      <span>状态:</span>
      <el-select v-model="audit" size="small">
        <el-option label="全部" :value="''"></el-option>
        <el-option label="待审核" value="0"></el-option>
        <el-option label="复审中" value="1"></el-option>
        <el-option label="已审核" value="2"></el-option>
        <el-option label="已拒绝" value="3"></el-option>
      </el-select>
      <el-input
        v-model="brandName"
        placeholder="商家名称"
        size="small"
        clearable
        class="inline-input"
      ></el-input>
      <el-button
        type="primary"
        size="small"
        @click="search"
        icon="el-icon-search"
        >搜索</el-button
      >
    </div>
    <div v-loading="fullscreenLoading">
      <el-table :data="list" style="width: 100%;">
        <el-table-column prop="fullName" label="商家全称"></el-table-column>
        <el-table-column prop="username" label="商家账户"></el-table-column>
        <el-table-column prop="accountType" label="账户类型">
          <template slot-scope="scope">
            <span v-if="scope.row.accountType === 1">个人</span>
            <span v-if="scope.row.accountType === 2">企业</span>
          </template>
        </el-table-column>
        <el-table-column prop="legalPerson" label="法人名称"></el-table-column>
        <el-table-column
          prop="authorizedPerson"
          label="被授权人"
        ></el-table-column>
        <el-table-column
          prop="corporateaccount"
          label="银行账户"
        ></el-table-column>
        <el-table-column prop="cankofdeposit" label="开户行"></el-table-column>
        <el-table-column prop="deduct" label="提点比例"></el-table-column>
        <el-table-column prop="updateTime" label="申请时间"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.audit === 0">未审核</el-tag>
            <el-tag size="mini" v-else-if="scope.row.audit === 1" type="success"
              >复审中</el-tag
            >
            <el-tag size="mini" v-else-if="scope.row.audit === 2" type="success"
              >已审核</el-tag
            >
            <el-tag size="mini" v-else-if="scope.row.audit === 3" type="danger"
              >已拒绝</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.audit === 0"
              size="mini"
              type="primary"
              @click="checkout(scope.row)"
              >初审</el-button
            >
            <el-button
              v-if="scope.row.audit === 1"
              size="mini"
              type="primary"
              @click="checkout(scope.row)"
              >复审</el-button
            >
            <el-button v-else size="mini" @click="checkout(scope.row)"
              >查看</el-button
            >
            <el-button size="mini" @click="bianji(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <table class="table" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <th>序号</th>
                    <th>商家账号</th>
                    <th>状态</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list" :key="item.id">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.username }}</td>
                        <td>
                            <el-tag size="mini" v-if="item.audit === 0">未审核</el-tag>
                            <el-tag size="mini" v-else-if="item.audit === 1" type="success">已审核</el-tag>
                            <el-tag size="mini" v-else-if="item.audit === 2" type="danger">已拒绝</el-tag>
                        </td>
                        <td>
                            <el-button size="mini" type="primary" @click="checkout(item)">查 看</el-button>
                        </td>
                    </tr>
                </tbody>
            </table>-->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page.num"
          :page-size="page.size"
          layout="total, prev, pager, next"
          :total="page.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title :visible.sync="dialogVisible" width="900px">
      <div class="dialog-inner">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info">
              <p>商家全称：{{ store.fullName }}</p>
              <p>账户类型：{{ store.accountType ? "企业" : "个人" }}</p>
              <p>开户行：{{ store.cankofdeposit }}</p>
            </div>
            <div class="img-list">
              <span>法人身份证：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.corporatecapacity"
                    class="img"
                    :src="store.corporatecapacity"
                    :preview-src-list="[store.corporatecapacity]"
                  ></el-image>
                </li>
                <li>
                  <el-image
                    v-if="store.corporatecapacitySide"
                    class="img"
                    :src="store.corporatecapacitySide"
                    :preview-src-list="[store.corporatecapacitySide]"
                  ></el-image>
                </li>
              </ul>
            </div>
            <div class="img-list">
              <span>营业执照：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.cusinesslicense"
                    class="img"
                    :src="store.cusinesslicense"
                    :preview-src-list="[store.cusinesslicense]"
                  ></el-image>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info">
              <p>商家账号：{{ store.username }}</p>
              <p>法人名称：{{ store.legalPerson }}</p>
              <p>银行账户：{{ store.cankofdeposit }}</p>
            </div>
            <div class="img-list">
              <span>开户许可证/银行卡：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.bankCard"
                    class="img"
                    :src="store.bankCard"
                    :preview-src-list="[store.bankCard]"
                  ></el-image>
                </li>
              </ul>
            </div>
            <div class="img-list">
              <span>食品流通许可证或其他证件：</span>
              <ul class="flex-row flex-wrap" v-if="store.otherdocuments">
                <li v-for="(img, index) in store.otherdocuments" :key="index">
                  <el-image
                    class="img"
                    :src="img"
                    :preview-src-list="store.otherdocuments"
                  ></el-image>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <div class="d-footer">
          <el-form label-width="80px">
            <el-form-item label="提点比例:">
              <el-input
                v-model="store.deduct"
                style="width:60px"
                :disabled="store.audit == 2 || store.audit == 3"
              ></el-input
              >%
            </el-form-item>
            <el-form-item label="审核:" v-if="store.audit == 0">
              <el-radio v-model="form.audit" :label="1">通过</el-radio>
              <el-radio v-model="form.audit" :label="3">拒绝</el-radio>
            </el-form-item>
            <el-form-item label="审核:" v-if="store.audit == 1">
              <el-radio v-model="form.audit" :label="2">通过</el-radio>
              <el-radio v-model="form.audit" :label="3">拒绝</el-radio>
            </el-form-item>
            <el-form-item label="理由:" v-if="form.audit === 3">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label>
              <el-button type="primary" @click="auditDo">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="提示" :visible.sync="dialogXg" width="70%">
      <div class="dialog-inner">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info">
              <p>商家全称：<el-input v-model="store.fullName" style="width:200px"></el-input></p>
              <p >
                账户类型：
                <!-- <el-input v-model="store.accountType"></el-input> -->
                <el-select
                style="width:200px"
                  v-model="store.accountType"
                  placeholder="请选择账户类型"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </p>
              <p>开户行：<el-input v-model="store.cankofdeposit" style="width:200px"></el-input></p>
            </div>
            <div class="img-list">
              <span>法人身份证：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.corporatecapacity"
                    class="img"
                    :src="store.corporatecapacity"
                    :preview-src-list="[store.corporatecapacity]"
                  ></el-image>
                </li>
                <li>
                  <el-image
                    v-if="store.corporatecapacitySide"
                    class="img"
                    :src="store.corporatecapacitySide"
                    :preview-src-list="[store.corporatecapacitySide]"
                  ></el-image>
                </li>
              </ul>
            </div>
            <div class="img-list">
              <span>营业执照：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.cusinesslicense"
                    class="img"
                    :src="store.cusinesslicense"
                    :preview-src-list="[store.cusinesslicense]"
                  ></el-image>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info">
              <p >商家账号：
                <el-input v-model="store.username" style="width:200px"></el-input>
              </p>
              <p>
                法人名称：
                <el-input v-model="store.legalPerson" style="width:200px"></el-input>
              </p>
              <p >
                银行账户：
                <el-input v-model="store.corporateaccount" style="width:200px"></el-input>
              </p>
                            <p >
                被授权人：
                <el-input v-model="store.authorizedPerson" style="width:200px"></el-input>
              </p>
            </div>
            <div class="img-list">
              <span>开户许可证/银行卡：</span>
              <ul class="flex-row flex-wrap">
                <li>
                  <el-image
                    v-if="store.bankCard"
                    class="img"
                    :src="store.bankCard"
                    :preview-src-list="[store.bankCard]"
                  ></el-image>
                </li>
              </ul>
            </div>
            <div class="img-list">
              <span>食品流通许可证或其他证件：</span>
              <ul class="flex-row flex-wrap" v-if="store.otherdocuments">
                <li v-for="(img, index) in store.otherdocuments" :key="index">
                  <el-image
                    class="img"
                    :src="img"
                    :preview-src-list="store.otherdocuments"
                  ></el-image>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <div class="d-footer">
          <p>
            审核状态
            <el-select v-model="store.audit" placeholder="请选择审核类型">
              <el-option
                v-for="item in code"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="margin-top:20px">
            提点比例
            <el-input v-model="deduct" style="width:100px"></el-input>%
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="comfire">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  updateAudit,
  getList,
  updateAuditToReview,
  updateAdmin
} from "@/api/merchant";
export default {
  data() {
    return {
      audit: "",
      brandId: "",
      deduct: "",
      brandName: "",
      form: {
        audit: "",
        remark: ""
      },
      list: [],
      page: {
        size: 10,
        num: 1,
        total: 0
      },
      fullscreenLoading: false,
      dialogVisible: false,
      dialogXg: false,
      store: {},
      options: [
        {
          value: 1,
          label: "个人"
        },
        {
          value: 2,
          label: "企业"
        }
      ],
      code: [
        {
          value: 0,
          label: "待审核"
        },
        {
          value: 1,
          label: "复审中"
        },
        {
          value: 2,
          label: "已通过"
        },
        {
          value: 3,
          label: "已拒绝"
        }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    search() {
      this.page.num = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page.num = val;
      this.getData();
    },
    /* 获取列表数据 */
    async getData() {
      this.fullscreenLoading = true;
      const query = {
        audit: this.audit,
        brandName: this.brandName,
        num: this.page.num,
        size: this.page.size
      };
      try {
        const { errno, data, errmsg } = await getList(query);
        if (errno === 0) {
          this.list = data.list || [];
          this.page.num = data.pageNum;
          this.page.total = data.total;
        } else {
          this.$message({
            message: errmsg,
            type: "warning"
          });
        }
      } catch (err) {
        console.error(err);
      }
      this.fullscreenLoading = false;
    },

    checkout(item) {
      this.store = item;
      this.dialogVisible = true;
    },
    bianji(item) {
      this.store = item;
      this.brandId = this.store.id;
      this.dialogXg = true;
    },
    async comfire() {
      console.log(this.store.accountType);
      const query = {
        fullName: this.store.fullName,
        accountType: this.store.accountType,
        cankofdeposit: this.store.cankofdeposit,
        corporateaccount: this.store.corporateaccount,
        legalPerson: this.store.legalPerson,
        audit: this.store.audit,
        brandId: this.brandId,
        deduct: this.deduct,
        authorizedPerson:this.store.authorizedPerson
      };
      try {
        const { errno, data, errmsg } = await updateAdmin(query);
        if (errno === 0) {
          console.log("55");
          this.$message({
            message: errmsg,
            type: "success"
          });
        } else {
          this.$message({
            message: errmsg,
            type: "warning"
          });
        }
      } catch (err) {
        console.error(err);
      }
      this.dialogXg = false;
      this.getData()
    },
    /* 审核 */
    async auditDo() {
      console.log(this.form.audit, "this.form.audit");
      console.log(this.store.audit, "this.store.audit");
      if (!this.form.audit) {
        return this.$message.warning("请选择审核");
      }
      let params = {
        adminId: this.store.id,
        audit: this.form.audit,
        deduct: this.store.deduct
      };
      if (this.store.audit == 0) {
        if (this.form.audit === 3) {
          params.remark = this.form.remark;
          if (!this.form.remark) {
            return this.$message.warning("请输入理由");
          }
        }
        try {
          const { errno, errmsg } = await updateAudit(params);
          if (errno === 0) {
            this.$message.success("操作成功");
            this.getData();
          } else {
            this.$message.warning(errmsg);
          }
        } catch (err) {
          console.error(err);
        }
      }
      if (this.store.audit == 1) {
        if (this.form.audit === 3) {
          params.remark = this.form.remark;
          if (!this.form.remark) {
            return this.$message.warning("请输入理由");
          }
        }
        try {
          const { errno, errmsg } = await updateAuditToReview(params);
          if (errno === 0) {
            this.form.deduct = "";
            this.$message.success("操作成功");
            this.getData();
          } else {
            this.$message.warning(errmsg);
          }
        } catch (err) {
          console.error(err);
        }
      }
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  padding: 30px 30px 0;
  .inline-input {
    width: 220px;
    margin: 0 12px;
  }
}
.table {
  width: 100%;
  th {
    height: 100px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
  }
  td {
    height: 80px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
}
.pagination {
  margin: 25px 0;
  text-align: center;
}
.dialog-inner {
  margin-top: -20px;
  padding-left: 30px;
  .info {
    p {
      margin-bottom: 15px;
    }
  }
  .img-list {
    margin-bottom: 25px;
    ul {
      margin-top: 15px;
      li {
        width: 150px;
        height: 90px;
        border: 2px dashed #aaa;
        margin-right: 20px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
